<script setup lang="ts">
import {ref} from "vue";
import StartPage from "./pages/StartPage.vue";
import GamePage from "./pages/GamePage.vue";
import EndPage from "./pages/EndPage.vue";

// const currentPage = ref("StartPage")
const currentPage = ref("GamePage")
// const currentPage = ref("EndPage")

function handleChangePage(pageName){
    currentPage.value = pageName;
}

</script>

<template>
  <Container>
      <start-page v-if="currentPage === 'StartPage'" @change-page="handleChangePage"></start-page>
      <game-page v-else-if="currentPage === 'GamePage'"></game-page>
      <end-page v-else-if="currentPage === 'EndPage'" @change-page="handleChangePage"></end-page>
  </Container>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
